<template>
	<view>
    <view class="cu-bar tabbar" style="margin-bottom: 20upx;">
      </view>
    <view class="cu-bar tabbar bg-white foot">
    	<view :class="'action '+[index==curTab?'cur-tab':'text-gray']+[index==curCent?' add-action':'']" v-for="(tab,index) in tabList"  @click="tabChange" :data-url="tab.url" :data-jumpType="tab.jumpType" :key="index">
      <block v-if="curCent==index">
        <button :class="'cu-btn text-white bg-tab shadow '+tab.icon"></button>
      </block>
      <block v-else>
        <view :class="tab.icon">
          <view v-if="tab.badge>0" class="cu-tag badge">{{tab.badge}}</view>
        </view>
      </block>
        {{tab.name}}
    	</view>
    </view>
	</view>
</template>

<script>
  export default{
    name:'bar1',
    data(){
      return {
        tabList:[{name:"首页",icon:"cuIcon-home",url:"/pages/index/index",jumpType:1,badge:0},
        {name:"我的",icon:"cuIcon-my",url:"/pages/my/my",jumpType:1,badge:0}],
        curTab:0,
        curCent:0,
      }
    },
    props:{
      tab:{
        type:String,
        default (){
          return "0";
        }
      },
      cent:{
        type:String,
        default (){
          return "4";
        }
      }
    },
    mounted() {
      this.curTab = this.tab*1
      this.curCent = this.cent*1
    },
    methods:{
      tabChange:function (e) {
        var jumpType=e.currentTarget.dataset.jumptype;
        if(jumpType==1){
         uni.redirectTo({
         	url:e.currentTarget.dataset.url,
         })
        }else{
          uni.navigateTo({
          	url:e.currentTarget.dataset.url,
          })
        }
      }
    }
  }
  
</script>
<style>
  .cur-tab{color: #11B3A7;}
  .bg-tab{background: #11B3A7;}
</style>
